<template>
  <div class="Config">
    <div style="height:20px;"></div>
    <div class="chart">
      <div class="title" style="font-size:30px;">图表配置</div>
      <div style="height:20px;"></div>
      <template v-for="(item, index) in chartsShow">
        <div class="chart-item pro-bor" :key="index">
          <div class="options-title">{{ item.module }}:</div>
          <div class="options">
            <template v-for="(ite, ind) in item.shows">
              <el-switch
                :key="ind"
                v-model="ite.show"
                class="switch-item"
                :active-text="ite.name"
              >
              </el-switch>
            </template>
          </div>
          <div style="height:20px;"></div>
        </div>
      </template>
    </div>
    <div class="btn">
      <el-button @click="handle" type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: true
    };
  },
  computed: {
    chartsShow() {
      return this.$store.state.user.chartsShow;
    }
  },
  methods: {
    handle() {
      this.$store.commit("setChartsShow", this.chartsShow);
    }
  }
};
</script>
